import React, { memo, useEffect, useState } from 'react'
import dynamic from 'next/dynamic'
import { videoScreenFull } from '../../store'
import styles from './index.module.scss'
import { useRecoilValue } from 'recoil'
import { toggleControlShow } from '../../store'
import cm from 'classnames'
import { devicePlatform } from '@/utils/utils'

const MultipleComponent = dynamic(() => import('./multiple'))
const MonitorComponent = dynamic(() => import('./monitor'))
const DefinitionComponent = dynamic(() => import('./definition'))
const FullScreen = dynamic(() => import('./fullscreen'))

const Index = ({ hideSpeed, toggleJuji, hideJuji, isLive, name }) => {
  const [ios, setIsIos] = useState(false)
  useEffect(() => {
    const { isIOS } = devicePlatform()
    setIsIos(isIOS)
  }, [])
  const fullScr = () => {
    document.querySelector('#histar-player')?.webkitEnterFullScreen()
  }
  const isControlShow = useRecoilValue(toggleControlShow)
  const isFullScreen = useRecoilValue(videoScreenFull)
  return (
    <div className={cm(styles['controls-container'], isControlShow ? '' : styles.controlsHidden)}>
      {/* 左侧控制按钮 */}
      <MonitorComponent />
      {/* 右侧控制按钮 */}
      <div className={styles['multifunction']}>
        {/* 倍速 */}
        {!hideSpeed && <MultipleComponent />}
        {/* 剧集组件 */}
        {!hideJuji && isFullScreen ? <DefinitionComponent toggleJuji={toggleJuji} isLive={isLive} /> : null}
        {/* 全屏切换组件 */}
        {ios ? (
          <img src="/images/video/fullScreen.png" className="w-8 h-8" alt="全屏" onClick={fullScr} />
        ) : (
          <FullScreen ios={ios} />
        )}
      </div>
    </div>
  )
}

export default memo(Index)
